<template>
  <div class="page-wrap page-home ignore" :class="listStyleVal == 1 ? '' : 'home-list'">
    <div class="fix-top">
      <van-search shape="round" v-model="searchObj.searchKey" placeholder="搜索" @search="onSearch" />
      <van-row class="t-switch" justify="space-between">
        <van-col span="8">
          <van-tabs v-model:active="investFlag" :before-change="beforeTabChange">
            <van-tab title="拟投"></van-tab>
            <van-tab title="已投"></van-tab>
          </van-tabs>
        </van-col>
        <van-space class="icon-wrap">
          <van-icon size="20px" :name="listStyleVal == 1 ? 'list-switch' : 'list-switching'" @click="changeListStype" />
        </van-space>
      </van-row>
      <van-row class="act-list" justify="space-between">
        <van-space :class="{ active: searchObj.screenList?.length }" size="2px" @click="filterBtn(true)"> 筛选<van-icon name="filter-o" /> </van-space>
        <van-space :class="{ active: searchObj.groupKey }" size="2px" @click="groupBtn(true)"> 分组<van-icon name="newspaper-o" /> </van-space>
        <van-space size="2px" @click="downloadBtn"> 下载<van-icon name="down" /> </van-space>
        <van-space class="disabled" size="2px"> BI图表<van-switch size="14px" disabled /> </van-space>
      </van-row>
    </div>
    <div class="p-list">
      <!-- <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="loadMore"> -->
      <template v-if="listStyleVal == 1">
        <list-item v-for="item in listData" :key="item.id" :data="item" />
      </template>
      <template v-else>
        <list-table :data="groupData"></list-table>
      </template>
      <!-- </van-list> -->
    </div>
    <!-- 筛选弹窗 START -->
    <van-popup v-model:show="filterBool" position="bottom" :style="{ height: '50%' }">
      <div class="filter-wrap">
        <van-nav-bar title="筛选">
          <template #right>
            <van-icon @click="filterBtn(false)" name="cross" color="#000" size="20" />
          </template>
        </van-nav-bar>
        <van-row class="btns" justify="space-around">
          <van-col :span="11">
            <van-button block plain hairline type="primary" @click="resetFilterBtn">重置</van-button>
          </van-col>
          <van-col :span="11">
            <van-button block type="primary" @click="confirmFilterBtn">筛选</van-button>
          </van-col>
        </van-row>
        <div class="filter-main">
          <filter-condition ref="filterConditionRef" />
        </div>
      </div>
    </van-popup>
    <!-- 分组 -->
    <van-popup v-model:show="groupBool" position="bottom">
      <div class="group-wrap">
        <h5>已选：{{ groupObj.groupName }}</h5>
        <p>您可以选择以下维度查看分组数据</p>
        <div class="group-main">
          <van-button @click="groupConfirm(item)" plain hairline :type="item.groupKey == groupObj.groupKey ? 'primary' : 'default'" v-for="item in groupKeyList" :key="item.groupKey">{{ item.groupName }}</van-button>
        </div>
        <van-row class="btns" justify="space-around">
          <van-col :span="11">
            <van-button round block plain hairline type="primary" @click="groupClearBtn">重置</van-button>
          </van-col>
          <van-col :span="11">
            <van-button round block type="primary" @click="groupSelectBtn">确认</van-button>
          </van-col>
        </van-row>
      </div>
    </van-popup>
    <!-- loading -->
    <van-loading vertical v-if="loading">
      <template #icon></template>
      <vue3-lottie :animationData="loadingImg" :width="100" />
      数据加载中...
    </van-loading>
  </div>
</template>

<script setup>
import { showFailToast, showDialog } from 'vant';
import { apiService } from '@/api';
import { ref, reactive, onMounted } from 'vue';
import loadingImg from '@/assets/json/animataion/loading.json';
const investFlag = ref(0); //1:已投，0：欲投决
const listStyleVal = ref(1);
const filterBool = ref(false);
const filterConditionRef = ref();
const groupBool = ref(false);
const groupObj = ref({});
const groupKeyList = ref([
  {
    groupName: '主行业',
    groupKey: 1
  },
  {
    groupName: '主管合伙人',
    groupKey: 2
  },
  {
    groupName: '基金',
    groupKey: 3
  },
  {
    groupName: '投资阶段',
    groupKey: 4
  },
  {
    groupName: '进入轮次',
    groupKey: 5
  },
  {
    groupName: '项目分级',
    groupKey: 6
  }
]);
const filterBtn = (bool = false) => {
  filterBool.value = bool;
};
const confirmFilterBtn = () => {
  const screenList = filterConditionRef.value.getFilter();
  searchObj.screenList = screenList;
  filterBool.value = false;
  loadData();
};
const resetFilterBtn = () => {
  filterConditionRef.value.resetFilter();
  searchObj.screenList = [];
  filterBool.value = false;
  loadData();
};
const groupBtn = (bool = false) => {
  groupBool.value = bool;
};
const groupConfirm = (data) => {
  groupObj.value = data;
};
const groupSelectBtn = () => {
  searchObj.groupKey = groupObj.value.groupKey;
  groupBool.value = false;
  loadData();
};
const groupClearBtn = () => {
  groupObj.value = {};
  searchObj.groupKey = '';
  groupBool.value = false;
  loadData();
};
//列表
const listData = ref([]);
const groupData = ref({});
const searchObj = reactive({
  page: 0,
  pageSize: 10,
  searchKey: '',
  groupKey: ''
});
const downloadBtn = () => {
  showDialog({
    message: '数据下载任务进行中，下载后的文件将通过消息卡片进行通'
  }).then(() => {
    // on close
  });
};
//加载状态
const loading = ref(false);
const finished = ref(false);
//E
const beforeTabChange = (active) => {
  investFlag.value = active;
  loadData();
};
const onSearch = () => {
  loadData();
};
const changeListStype = () => {
  listStyleVal.value = listStyleVal.value == 1 ? 2 : 1;
  searchObj.page = 1;
  finished.value = false;
  loadData();
};
const loadListData = async (params) => {
  loading.value = true;
  listData.value = [];
  const res = await apiService.getList(params);
  if (res?.error?.msg) {
    return showFailToast();
  }
  if (!res.result?.records || res.result?.records.length < searchObj?.pageSize) {
    finished.value = true;
  }
  listData.value.push(...(res.result?.records || []));
  loading.value = false;
};
const loadGroupData = async (params) => {
  loading.value = true;
  groupData.value = {};
  const res = await apiService.groupList(params);
  loading.value = false;
  groupData.value = res.result;
};
//加载列表
const loadData = async () => {
  const params = {
    ...searchObj,
    investFlag: investFlag.value
  };
  if (listStyleVal.value == 1) {
    loadListData(params);
  } else {
    loadGroupData(params);
  }
};
onMounted(() => {
  loadData();
});
</script>
<style scoped lang="less">
@import './home.less';
</style>
